{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 本周知识点\n",
    "\n",
    "## 气泡图实践多维度时序图"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* 数据准备：\n",
    "> bokeh.sampledata.download() 下载元数据"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "#导入库\n",
    "import bokeh"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Using data directory: C:\\Users\\86198\\.bokeh\\data\n",
      "Skipping 'CGM.csv' (checksum match)\n",
      "Skipping 'US_Counties.zip' (checksum match)\n",
      "Skipping 'us_cities.json' (checksum match)\n",
      "Skipping 'unemployment09.csv' (checksum match)\n",
      "Skipping 'AAPL.csv' (checksum match)\n",
      "Skipping 'FB.csv' (checksum match)\n",
      "Skipping 'GOOG.csv' (checksum match)\n",
      "Skipping 'IBM.csv' (checksum match)\n",
      "Skipping 'MSFT.csv' (checksum match)\n",
      "Skipping 'WPP2012_SA_DB03_POPULATION_QUINQUENNIAL.zip' (checksum match)\n",
      "Skipping 'gapminder_fertility.csv' (checksum match)\n",
      "Skipping 'gapminder_population.csv' (checksum match)\n",
      "Skipping 'gapminder_life_expectancy.csv' (checksum match)\n",
      "Skipping 'gapminder_regions.csv' (checksum match)\n",
      "Skipping 'world_cities.zip' (checksum match)\n",
      "Skipping 'airports.json' (checksum match)\n",
      "Skipping 'movies.db.zip' (checksum match)\n",
      "Skipping 'airports.csv' (checksum match)\n",
      "Skipping 'routes.csv' (checksum match)\n",
      "Skipping 'haarcascade_frontalface_default.xml' (checksum match)\n"
     ]
    }
   ],
   "source": [
    "bokeh.sampledata.download()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "from bokeh.embed import file_html\n",
    "from bokeh.io import output_notebook, show\n",
    "from bokeh.layouts import layout\n",
    "from bokeh.models import (\n",
    "    ColumnDataSource, Plot, Circle, Range1d, LinearAxis, HoverTool, \n",
    "    Text, SingleIntervalTicker, Slider, CustomJS, Legend, LegendItem, CategoricalColorMapper)  # 底层样式\n",
    "from bokeh.palettes import Spectral6 #调色板\n",
    "# from data import process_data\n",
    "import numpy as np"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "def process_data():\n",
    "    from bokeh.sampledata.gapminder import fertility, life_expectancy, population, regions\n",
    "\n",
    "    # Make the column names ints not strings for handling\n",
    "    columns = list(fertility.columns)\n",
    "    years = list(range(int(columns[0]), int(columns[-1])))\n",
    "    rename_dict = dict(zip(columns, years))\n",
    "\n",
    "    fertility = fertility.rename(columns=rename_dict)\n",
    "    life_expectancy = life_expectancy.rename(columns=rename_dict)\n",
    "    population = population.rename(columns=rename_dict)\n",
    "    regions = regions.rename(columns=rename_dict)\n",
    "    regions_list = list(regions.Group.unique())\n",
    "\n",
    "    # Turn population into bubble sizes. Use min_size and factor to tweak.\n",
    "    scale_factor = 200\n",
    "    population_size = np.sqrt(population / np.pi) / scale_factor\n",
    "    min_size = 3\n",
    "    population_size = population_size.where(population_size >= min_size).fillna(min_size)\n",
    "\n",
    "    return fertility, life_expectancy, population_size, regions, years, regions_list"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 数据预处理，感兴趣可以在Pandas提前处理好直接加载\n",
    "fertility_df, life_expectancy_df, population_df_size, regions_df, years, regions_list = process_data()\n",
    "sources = {}\n",
    "region_name = regions_df.Group\n",
    "region_name.name = 'region'\n",
    "for year in years:\n",
    "    fertility = fertility_df[year]\n",
    "    fertility.name = 'fertility'\n",
    "    life = life_expectancy_df[year]\n",
    "    life.name = 'life' \n",
    "    population = population_df_size[year]\n",
    "    population.name = 'population' \n",
    "    new_df = pd.concat([fertility, life, population, region_name], axis=1)\n",
    "    sources['_' + str(year)] = ColumnDataSource(new_df)\n",
    "dictionary_of_sources = dict(zip([x for x in years], ['_%s' % x for x in years]))\n",
    "js_source_array = str(dictionary_of_sources).replace(\"'\", \"\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Country\n",
       "Afghanistan              5.141\n",
       "Albania                  1.760\n",
       "Algeria                  2.820\n",
       "American Samoa             NaN\n",
       "Andorra                    NaN\n",
       "                         ...  \n",
       "Virgin Islands (U.S.)    2.497\n",
       "Yemen, Rep.              4.207\n",
       "Zambia                   5.731\n",
       "Zimbabwe                 3.564\n",
       "Åland                      NaN\n",
       "Name: fertility, Length: 244, dtype: float64"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# 查看数据\n",
    "fertility"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div style=\"display: table;\"><div style=\"display: table-row;\"><div style=\"display: table-cell;\"><b title=\"bokeh.models.sources.ColumnDataSource\">ColumnDataSource</b>(</div><div style=\"display: table-cell;\">id&nbsp;=&nbsp;'1001', <span id=\"1051\" style=\"cursor: pointer;\">&hellip;)</span></div></div><div class=\"1050\" style=\"display: none;\"><div style=\"display: table-cell;\"></div><div style=\"display: table-cell;\">data&nbsp;=&nbsp;{'population': {'__ndarray__': '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', 'shape': (244,), 'dtype': 'float64', 'order': 'little'}, 'fertility': {'__ndarray__': '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', 'shape': (244,), 'dtype': 'float64', 'order': 'little'}, 'region': ['South Asia', 'Europe & Central Asia', 'Middle East & North Africa', 'East Asia & Pacific', 'Europe & Central Asia', 'Sub-Saharan Africa', 'America', 'America', 'America', 'Europe & Central Asia', 'America', 'East Asia & Pacific', 'Europe & Central Asia', 'Europe & Central Asia', 'America', 'Middle East & North Africa', 'South Asia', 'America', 'Europe & Central Asia', 'Europe & Central Asia', 'America', 'Sub-Saharan Africa', 'America', 'South Asia', 'America', 'Europe & Central Asia', 'Sub-Saharan Africa', 'America', 'America', 'East Asia & Pacific', 'Europe & Central Asia', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'East Asia & Pacific', 'Sub-Saharan Africa', 'America', 'Sub-Saharan Africa', 'America', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'Europe & Central Asia', 'America', 'East Asia & Pacific', 'East Asia & Pacific', 'East Asia & Pacific', 'America', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'East Asia & Pacific', 'America', 'Sub-Saharan Africa', 'Europe & Central Asia', 'America', 'Europe & Central Asia', 'Europe & Central Asia', 'Europe & Central Asia', 'Middle East & North Africa', 'America', 'America', 'America', 'Middle East & North Africa', 'America', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'Europe & Central Asia', 'Sub-Saharan Africa', 'Europe & Central Asia', 'America', 'East Asia & Pacific', 'Europe & Central Asia', 'Europe & Central Asia', 'America', 'East Asia & Pacific', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'Europe & Central Asia', 'Europe & Central Asia', 'Sub-Saharan Africa', 'Europe & Central Asia', 'Europe & Central Asia', 'Europe & Central Asia', 'America', 'America', 'East Asia & Pacific', 'America', 'Europe & Central Asia', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'America', 'America', 'Europe & Central Asia', 'America', 'East Asia & Pacific', 'Europe & Central Asia', 'Europe & Central Asia', 'South Asia', 'East Asia & Pacific', 'Middle East & North Africa', 'Middle East & North Africa', 'Europe & Central Asia', 'Europe & Central Asia', 'Middle East & North Africa', 'Europe & Central Asia', 'America', 'East Asia & Pacific', 'Europe & Central Asia', 'Middle East & North Africa', 'Europe & Central Asia', 'Sub-Saharan Africa', 'East Asia & Pacific', 'East Asia & Pacific', 'East Asia & Pacific', 'Europe & Central Asia', 'Middle East & North Africa', 'Europe & Central Asia', 'East Asia & Pacific', 'Europe & Central Asia', 'Middle East & North Africa', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'Middle East & North Africa', 'Europe & Central Asia', 'Europe & Central Asia', 'Europe & Central Asia', 'East Asia & Pacific', 'Europe & Central Asia', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'East Asia & Pacific', 'South Asia', 'Sub-Saharan Africa', 'Europe & Central Asia', 'East Asia & Pacific', 'America', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'America', 'East Asia & Pacific', 'Europe & Central Asia', 'Europe & Central Asia', 'East Asia & Pacific', 'Europe & Central Asia', 'America', 'Middle East & North Africa', 'Sub-Saharan Africa', 'East Asia & Pacific', 'Sub-Saharan Africa', 'East Asia & Pacific', 'South Asia', 'Europe & Central Asia', 'America', 'East Asia & Pacific', 'East Asia & Pacific', 'America', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'East Asia & Pacific', 'East Asia & Pacific', 'Europe & Central Asia', 'East Asia & Pacific', 'Europe & Central Asia', 'Middle East & North Africa', 'South Asia', 'East Asia & Pacific', 'America', 'East Asia & Pacific', 'America', 'America', 'East Asia & Pacific', 'East Asia & Pacific', 'Europe & Central Asia', 'Europe & Central Asia', 'America', 'Middle East & North Africa', 'Sub-Saharan Africa', 'Europe & Central Asia', 'Europe & Central Asia', 'Sub-Saharan Africa', 'America', 'Sub-Saharan Africa', 'America', 'America', 'America', 'America', 'America', 'East Asia & Pacific', 'Europe & Central Asia', 'Sub-Saharan Africa', 'Middle East & North Africa', 'Sub-Saharan Africa', 'Europe & Central Asia', 'Europe & Central Asia', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'East Asia & Pacific', 'Europe & Central Asia', 'Europe & Central Asia', 'East Asia & Pacific', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'Europe & Central Asia', 'South Asia', 'Sub-Saharan Africa', 'America', 'Europe & Central Asia', 'Sub-Saharan Africa', 'Europe & Central Asia', 'Europe & Central Asia', 'Middle East & North Africa', 'East Asia & Pacific', 'Europe & Central Asia', 'Sub-Saharan Africa', 'East Asia & Pacific', 'East Asia & Pacific', 'Sub-Saharan Africa', 'East Asia & Pacific', 'East Asia & Pacific', 'America', 'Middle East & North Africa', 'Europe & Central Asia', 'Europe & Central Asia', 'America', 'East Asia & Pacific', 'Sub-Saharan Africa', 'Europe & Central Asia', 'Middle East & North Africa', 'Europe & Central Asia', 'America', 'America', 'Europe & Central Asia', 'East Asia & Pacific', 'East Asia & Pacific', 'America', 'Middle East & North Africa', 'Middle East & North Africa', 'East Asia & Pacific', 'America', 'Middle East & North Africa', 'Sub-Saharan Africa', 'Sub-Saharan Africa', 'Europe & Central Asia'], 'index': ['Afghanistan', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'British Virgin Islands', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Cayman Islands', 'Central African Rep.', 'Chad', 'Channel Islands', 'Chile', 'China', 'Christmas Island', 'Cocos Island', 'Colombia', 'Comoros', 'Congo, Dem. Rep.', 'Congo, Rep.', 'Cook Islands', 'Costa Rica', \"Cote d'Ivoire\", 'Croatia', 'Cuba', 'Cyprus', 'Czech Rep.', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Rep.', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Faeroe Islands', 'Falkland Islands (Malvinas)', 'Fiji', 'Finland', 'France', 'French Guiana', 'French Polynesia', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Greece', 'Greenland', 'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Holy See', 'Honduras', 'Hong Kong, China', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jersey', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, Dem. Rep.', 'Korea, Rep.', 'Kosovo', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macao, China', 'Macedonia, FYR', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia, Fed. Sts.', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro', 'Montserrat', 'Morocco', 'Mozambique', 'Myanmar', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Niue', 'Norfolk Island', 'Northern Cyprus', 'Northern Mariana Islands', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Pitcairn', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russia', 'Rwanda', 'Saint Barthélemy', 'Saint Helena', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Martin', 'Saint Vincent and the Grenadines', 'Saint-Pierre-et-Miquelon', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia', 'Serbia excluding Kosovo', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovak Republic', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Sudan', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Svalbard', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Timor-Leste', 'Togo', 'Tokelau', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks and Caicos Islands', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Wallis et Futuna', 'Vanuatu', 'Venezuela', 'West Bank and Gaza', 'Western Sahara', 'Vietnam', 'Virgin Islands (U.S.)', 'Yemen, Rep.', 'Zambia', 'Zimbabwe', 'Åland'], 'life': {'__ndarray__': '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', 'shape': (244,), 'dtype': 'float64', 'order': 'little'}},</div></div><div class=\"1050\" style=\"display: none;\"><div style=\"display: table-cell;\"></div><div style=\"display: table-cell;\">js_event_callbacks&nbsp;=&nbsp;{},</div></div><div class=\"1050\" style=\"display: none;\"><div style=\"display: table-cell;\"></div><div style=\"display: table-cell;\">js_property_callbacks&nbsp;=&nbsp;{},</div></div><div class=\"1050\" style=\"display: none;\"><div style=\"display: table-cell;\"></div><div style=\"display: table-cell;\">name&nbsp;=&nbsp;None,</div></div><div class=\"1050\" style=\"display: none;\"><div style=\"display: table-cell;\"></div><div style=\"display: table-cell;\">selected&nbsp;=&nbsp;Selection(id='1053', ...),</div></div><div class=\"1050\" style=\"display: none;\"><div style=\"display: table-cell;\"></div><div style=\"display: table-cell;\">selection_policy&nbsp;=&nbsp;UnionRenderers(id='1052', ...),</div></div><div class=\"1050\" style=\"display: none;\"><div style=\"display: table-cell;\"></div><div style=\"display: table-cell;\">subscribed_events&nbsp;=&nbsp;[],</div></div><div class=\"1050\" style=\"display: none;\"><div style=\"display: table-cell;\"></div><div style=\"display: table-cell;\">tags&nbsp;=&nbsp;[])</div></div></div>\n",
       "<script>\n",
       "(function() {\n",
       "  var expanded = false;\n",
       "  var ellipsis = document.getElementById(\"1051\");\n",
       "  ellipsis.addEventListener(\"click\", function() {\n",
       "    var rows = document.getElementsByClassName(\"1050\");\n",
       "    for (var i = 0; i < rows.length; i++) {\n",
       "      var el = rows[i];\n",
       "      el.style.display = expanded ? \"none\" : \"table-row\";\n",
       "    }\n",
       "    ellipsis.innerHTML = expanded ? \"&hellip;)\" : \"&lsaquo;&lsaquo;&lsaquo;\";\n",
       "    expanded = !expanded;\n",
       "  });\n",
       "})();\n",
       "</script>\n"
      ],
      "text/plain": [
       "ColumnDataSource(id='1001', ...)"
      ]
     },
     "execution_count": 15,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "sources['_1964']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 画布参数\n",
    "xdr = Range1d(1, 9)\n",
    "ydr = Range1d(20, 100)\n",
    "plot = Plot(\n",
    "    x_range=xdr,\n",
    "    y_range=ydr,\n",
    "    plot_width=800,\n",
    "    plot_height=400,\n",
    "    outline_line_color=None,\n",
    "    toolbar_location=None, \n",
    "    min_border=20,\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 坐标轴参数\n",
    "AXIS_FORMATS = dict(\n",
    "    minor_tick_in=None,\n",
    "    minor_tick_out=None,\n",
    "    major_tick_in=None,\n",
    "    major_label_text_font_size=\"10pt\",\n",
    "    major_label_text_font_style=\"normal\",\n",
    "    axis_label_text_font_size=\"10pt\",\n",
    "\n",
    "    axis_line_color='#AAAAAA',\n",
    "    major_tick_line_color='#AAAAAA',\n",
    "    major_label_text_color='#666666',\n",
    "\n",
    "    major_tick_line_cap=\"round\",\n",
    "    axis_line_cap=\"round\",\n",
    "    axis_line_width=1,\n",
    "    major_tick_line_width=1,\n",
    ")\n",
    "xaxis = LinearAxis(ticker=SingleIntervalTicker(interval=1), axis_label=\"Children per woman (total fertility)\")\n",
    "yaxis = LinearAxis(ticker=SingleIntervalTicker(interval=20), axis_label=\"Life expectancy at birth (years)\")   \n",
    "plot.add_layout(xaxis, 'below')\n",
    "plot.add_layout(yaxis, 'left')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 添加年份图层（最底层）\n",
    "text_source = ColumnDataSource({'year': ['%s' % years[0]]})\n",
    "text = Text(x=2, y=35, text='year', text_font_size='150pt', text_color='#EEEEEE')\n",
    "plot.add_glyph(text_source, text)\n",
    "# 色盘，分类映射\n",
    "color_mapper = CategoricalColorMapper(palette=Spectral6, factors=regions_list)\n",
    "# 绘制气泡（散点）\n",
    "renderer_source = sources['_%s' % years[0]]\n",
    "circle_glyph = Circle(\n",
    "    x='fertility', y='life', size='population',\n",
    "    fill_color={'field': 'region', 'transform': color_mapper}, \n",
    "    fill_alpha=0.8, \n",
    "    line_color='#7c7e71', line_width=0.5, line_alpha=0.5)\n",
    "# 添加图层\n",
    "circle_renderer = plot.add_glyph(renderer_source, circle_glyph)\n",
    "# 添加hover工具\n",
    "tooltips = \"@index\"\n",
    "plot.add_tools(HoverTool(tooltips=tooltips, renderers=[circle_renderer]))\n",
    "# 添加滚动条空间\n",
    "code = \"\"\"\n",
    "    var year = slider.value,\n",
    "        sources = %s,\n",
    "        new_source_data = sources[year].data;\n",
    "    renderer_source.data = new_source_data;\n",
    "    text_source.data = {'year': [String(year)]};\n",
    "\"\"\" % js_source_array\n",
    "# 数据回调\n",
    "callback = CustomJS(args=sources, code=code)\n",
    "slider = Slider(start=years[0], end=years[-1], value=1, step=1, title=\"Year\")\n",
    "slider.js_on_change('value',callback)\n",
    "#callback.js_on_change('active',callback)\n",
    "callback.args[\"renderer_source\"] = renderer_source\n",
    "callback.args[\"slider\"] = slider\n",
    "callback.args[\"text_source\"] = text_source\n",
    "# 显示\n",
    "show(layout([[plot], [slider]], sizing_mode='scale_width'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 折线图\n",
    "> 随时间连续变化的图形\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 单线条折线图示例代码"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"2159\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  var JS_MIME_TYPE = 'application/javascript';\n",
       "  var HTML_MIME_TYPE = 'text/html';\n",
       "  var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  var CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    var script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    var cell = handle.cell;\n",
       "\n",
       "    var id = cell.output_area._bokeh_element_id;\n",
       "    var server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id != null && id in Bokeh.index) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            var id = msg.content.text.trim();\n",
       "            if (id in Bokeh.index) {\n",
       "              Bokeh.index[id].model.document.clear();\n",
       "              delete Bokeh.index[id];\n",
       "            }\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    var output_area = handle.output_area;\n",
       "    var output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "      var bk_div = document.createElement(\"div\");\n",
       "      bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "      var script_attrs = bk_div.children[0].attributes;\n",
       "      for (var i = 0; i < script_attrs.length; i++) {\n",
       "        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "        toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n",
       "      }\n",
       "      // store reference to server id on output_area\n",
       "      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function register_renderer(events, OutputArea) {\n",
       "\n",
       "    function append_mime(data, metadata, element) {\n",
       "      // create a DOM node to render to\n",
       "      var toinsert = this.create_output_subarea(\n",
       "        metadata,\n",
       "        CLASS_NAME,\n",
       "        EXEC_MIME_TYPE\n",
       "      );\n",
       "      this.keyboard_manager.register_events(toinsert);\n",
       "      // Render to node\n",
       "      var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "      render(props, toinsert[toinsert.length - 1]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  var NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    var el = document.getElementById(\"2159\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length;\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "\n",
       "    function on_error() {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < css_urls.length; i++) {\n",
       "      var url = css_urls[i];\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }\n",
       "\n",
       "    const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js\": \"kLr4fYcqcSpbuI95brIH3vnnYCquzzSxHPU6XGQCIkQRGJwhg0StNbj1eegrHs12\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js\": \"xIGPmVtaOm+z0BqfSOMn4lOR6ciex448GIKG4eE61LsAvmGj48XcMQZtKcE/UXZe\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js\": \"Dc9u1wF/0zApGIWoBbH77iWEHtdmkuYWG839Uzmv8y8yBLXebjO9ZnERsde5Ln/P\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js\": \"cT9JaBz7GiRXdENrJLZNSC6eMNF3nh3fa5fTF51Svp+ukxPdwcU5kGXGPBgDCa2j\"};\n",
       "\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      if (url in hashes) {\n",
       "        element.crossOrigin = \"anonymous\";\n",
       "        element.integrity = \"sha384-\" + hashes[url];\n",
       "      }\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "  };\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  \n",
       "  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js\"];\n",
       "  var css_urls = [];\n",
       "  \n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "    \n",
       "    \n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if (root.Bokeh !== undefined || force === true) {\n",
       "      \n",
       "    for (var i = 0; i < inline_js.length; i++) {\n",
       "      inline_js[i].call(root, root.Bokeh);\n",
       "    }\n",
       "    if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      var cell = $(document.getElementById(\"2159\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(css_urls, js_urls, function() {\n",
       "      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n\n  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  var NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    var el = document.getElementById(\"2159\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\n\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n\n    function on_error() {\n      console.error(\"failed to load \" + url);\n    }\n\n    for (var i = 0; i < css_urls.length; i++) {\n      var url = css_urls[i];\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }\n\n    const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js\": \"kLr4fYcqcSpbuI95brIH3vnnYCquzzSxHPU6XGQCIkQRGJwhg0StNbj1eegrHs12\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js\": \"xIGPmVtaOm+z0BqfSOMn4lOR6ciex448GIKG4eE61LsAvmGj48XcMQZtKcE/UXZe\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js\": \"Dc9u1wF/0zApGIWoBbH77iWEHtdmkuYWG839Uzmv8y8yBLXebjO9ZnERsde5Ln/P\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js\": \"cT9JaBz7GiRXdENrJLZNSC6eMNF3nh3fa5fTF51Svp+ukxPdwcU5kGXGPBgDCa2j\"};\n\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      if (url in hashes) {\n        element.crossOrigin = \"anonymous\";\n        element.integrity = \"sha384-\" + hashes[url];\n      }\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n  };\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  \n  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js\"];\n  var css_urls = [];\n  \n\n  var inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    function(Bokeh) {\n    \n    \n    }\n  ];\n\n  function run_inline_js() {\n    \n    if (root.Bokeh !== undefined || force === true) {\n      \n    for (var i = 0; i < inline_js.length; i++) {\n      inline_js[i].call(root, root.Bokeh);\n    }\n    if (force === true) {\n        display_loaded();\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    } else if (force !== true) {\n      var cell = $(document.getElementById(\"2159\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(css_urls, js_urls, function() {\n      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bokeh.plotting import figure,output_notebook,show\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "BokehDeprecationWarning: 'legend' keyword is deprecated, use explicit 'legend_label', 'legend_field', or 'legend_group' keywords instead\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"76bb9fbf-6493-4e6b-a303-e5c6aa782b37\" data-root-id=\"2264\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  var docs_json = {\"d6d04f21-e2c1-4412-ae08-cd549a48be21\":{\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"2275\"}],\"center\":[{\"id\":\"2278\"},{\"id\":\"2282\"},{\"id\":\"2310\"}],\"left\":[{\"id\":\"2279\"}],\"plot_height\":400,\"plot_width\":400,\"renderers\":[{\"id\":\"2300\"}],\"title\":{\"id\":\"2265\"},\"toolbar\":{\"id\":\"2290\"},\"x_range\":{\"id\":\"2267\"},\"x_scale\":{\"id\":\"2271\"},\"y_range\":{\"id\":\"2269\"},\"y_scale\":{\"id\":\"2273\"}},\"id\":\"2264\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{},\"id\":\"2280\",\"type\":\"BasicTicker\"},{\"attributes\":{},\"id\":\"2273\",\"type\":\"LinearScale\"},{\"attributes\":{\"source\":{\"id\":\"2297\"}},\"id\":\"2301\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"2286\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"2269\",\"type\":\"DataRange1d\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"green\",\"line_width\":5,\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2299\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2287\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"2271\",\"type\":\"LinearScale\"},{\"attributes\":{\"axis\":{\"id\":\"2275\"},\"ticker\":null},\"id\":\"2278\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"2305\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"axis\":{\"id\":\"2279\"},\"dimension\":1,\"ticker\":null},\"id\":\"2282\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"2284\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"line_color\":\"green\",\"line_width\":5,\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2298\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2283\",\"type\":\"PanTool\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"2289\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"2283\"},{\"id\":\"2284\"},{\"id\":\"2285\"},{\"id\":\"2286\"},{\"id\":\"2287\"},{\"id\":\"2288\"}]},\"id\":\"2290\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"2288\",\"type\":\"HelpTool\"},{\"attributes\":{\"data\":{\"x\":[1,2,3,4,5,6,7],\"y\":[6,7,2,4,5,10,4]},\"selected\":{\"id\":\"2307\"},\"selection_policy\":{\"id\":\"2308\"}},\"id\":\"2297\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"2303\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"data_source\":{\"id\":\"2297\"},\"glyph\":{\"id\":\"2298\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2299\"},\"selection_glyph\":null,\"view\":{\"id\":\"2301\"}},\"id\":\"2300\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"2307\",\"type\":\"Selection\"},{\"attributes\":{\"text\":\"line example\"},\"id\":\"2265\",\"type\":\"Title\"},{\"attributes\":{},\"id\":\"2308\",\"type\":\"UnionRenderers\"},{\"attributes\":{},\"id\":\"2267\",\"type\":\"DataRange1d\"},{\"attributes\":{\"label\":{\"value\":\"Temp.\"},\"renderers\":[{\"id\":\"2300\"}]},\"id\":\"2311\",\"type\":\"LegendItem\"},{\"attributes\":{},\"id\":\"2276\",\"type\":\"BasicTicker\"},{\"attributes\":{\"axis_label\":\"y\",\"formatter\":{\"id\":\"2305\"},\"ticker\":{\"id\":\"2280\"}},\"id\":\"2279\",\"type\":\"LinearAxis\"},{\"attributes\":{\"items\":[{\"id\":\"2311\"}]},\"id\":\"2310\",\"type\":\"Legend\"},{\"attributes\":{\"axis_label\":\"x\",\"formatter\":{\"id\":\"2303\"},\"ticker\":{\"id\":\"2276\"}},\"id\":\"2275\",\"type\":\"LinearAxis\"},{\"attributes\":{\"overlay\":{\"id\":\"2289\"}},\"id\":\"2285\",\"type\":\"BoxZoomTool\"}],\"root_ids\":[\"2264\"]},\"title\":\"Bokeh Application\",\"version\":\"2.1.1\"}};\n",
       "  var render_items = [{\"docid\":\"d6d04f21-e2c1-4412-ae08-cd549a48be21\",\"root_ids\":[\"2264\"],\"roots\":{\"2264\":\"76bb9fbf-6493-4e6b-a303-e5c6aa782b37\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "2264"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "# 数据\n",
    "x = [1, 2, 3, 4, 5, 6, 7]\n",
    "y = [6, 7, 2, 4, 5, 10, 4]\n",
    "# 画布：坐标轴标签，画布大小\n",
    "p = figure(title=\"line example\", x_axis_label='x', y_axis_label='y', width=400, height=400)\n",
    "# 画图：数据、图例、线宽\n",
    "p.line(x, y, legend=\"Temp.\", line_color=\"green\",line_width=5)  # 折线\n",
    "# 显示\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "###  多线条折线图示例代码\n",
    "\n",
    "* 参数说明：\n",
    "> 1. color:一次性设置所有线条颜色\n",
    "> 2. alpha: 一次性设置所有线条的透明度\n",
    "\n",
    "* tools说明\n",
    "> https://docs.bokeh.org/en/latest/docs/user_guide/tools.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"3d1c2981-ab82-4291-a0a4-faebca952a54\" data-root-id=\"2376\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  var docs_json = {\"8fbb8bb9-abc4-4119-984a-9a6372f9f961\":{\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"2385\"}],\"center\":[{\"id\":\"2388\"},{\"id\":\"2392\"}],\"left\":[{\"id\":\"2389\"}],\"plot_height\":400,\"plot_width\":400,\"renderers\":[{\"id\":\"2410\"}],\"title\":{\"id\":\"2428\"},\"toolbar\":{\"id\":\"2400\"},\"x_range\":{\"id\":\"2377\"},\"x_scale\":{\"id\":\"2381\"},\"y_range\":{\"id\":\"2379\"},\"y_scale\":{\"id\":\"2383\"}},\"id\":\"2376\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"axis\":{\"id\":\"2385\"},\"ticker\":null},\"id\":\"2388\",\"type\":\"Grid\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"2399\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"2386\",\"type\":\"BasicTicker\"},{\"attributes\":{\"data\":{\"line_alpha\":[0.8,0.3],\"line_color\":[\"firebrick\",\"navy\"],\"xs\":[[1,3,2],[3,4,6,6]],\"ys\":[[2,1,4],[4,7,8,5]]},\"selected\":{\"id\":\"2434\"},\"selection_policy\":{\"id\":\"2435\"}},\"id\":\"2407\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"formatter\":{\"id\":\"2430\"},\"ticker\":{\"id\":\"2386\"}},\"id\":\"2385\",\"type\":\"LinearAxis\"},{\"attributes\":{\"line_alpha\":{\"field\":\"line_alpha\"},\"line_color\":{\"field\":\"line_color\"},\"line_width\":{\"value\":4},\"xs\":{\"field\":\"xs\"},\"ys\":{\"field\":\"ys\"}},\"id\":\"2408\",\"type\":\"MultiLine\"},{\"attributes\":{},\"id\":\"2434\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"2377\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"2381\",\"type\":\"LinearScale\"},{\"attributes\":{\"axis\":{\"id\":\"2389\"},\"dimension\":1,\"ticker\":null},\"id\":\"2392\",\"type\":\"Grid\"},{\"attributes\":{\"source\":{\"id\":\"2407\"}},\"id\":\"2411\",\"type\":\"CDSView\"},{\"attributes\":{\"formatter\":{\"id\":\"2432\"},\"ticker\":{\"id\":\"2390\"}},\"id\":\"2389\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"2398\",\"type\":\"HelpTool\"},{\"attributes\":{},\"id\":\"2379\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"2383\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"2435\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"data_source\":{\"id\":\"2407\"},\"glyph\":{\"id\":\"2408\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2409\"},\"selection_glyph\":null,\"view\":{\"id\":\"2411\"}},\"id\":\"2410\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"overlay\":{\"id\":\"2399\"}},\"id\":\"2395\",\"type\":\"BoxZoomTool\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"2393\"},{\"id\":\"2394\"},{\"id\":\"2395\"},{\"id\":\"2396\"},{\"id\":\"2397\"},{\"id\":\"2398\"}]},\"id\":\"2400\",\"type\":\"Toolbar\"},{\"attributes\":{\"text\":\"\"},\"id\":\"2428\",\"type\":\"Title\"},{\"attributes\":{},\"id\":\"2397\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"2390\",\"type\":\"BasicTicker\"},{\"attributes\":{},\"id\":\"2396\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"2393\",\"type\":\"PanTool\"},{\"attributes\":{},\"id\":\"2430\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"2432\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"line_alpha\":{\"value\":0.1},\"line_color\":{\"field\":\"line_color\"},\"line_width\":{\"value\":4},\"xs\":{\"field\":\"xs\"},\"ys\":{\"field\":\"ys\"}},\"id\":\"2409\",\"type\":\"MultiLine\"},{\"attributes\":{},\"id\":\"2394\",\"type\":\"WheelZoomTool\"}],\"root_ids\":[\"2376\"]},\"title\":\"Bokeh Application\",\"version\":\"2.1.1\"}};\n",
       "  var render_items = [{\"docid\":\"8fbb8bb9-abc4-4119-984a-9a6372f9f961\",\"root_ids\":[\"2376\"],\"roots\":{\"2376\":\"3d1c2981-ab82-4291-a0a4-faebca952a54\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "2376"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "# 设置画布大小\n",
    "p = figure(plot_width=400, plot_height=400)\n",
    "\n",
    "# 线段x,y位置点为列表；两段线的颜色、透明度、线宽\n",
    "p.multi_line([[1, 3, 2], [3, 4, 6, 6]], [[2, 1, 4], [4, 7, 8, 5]],\n",
    "             color=[\"firebrick\", \"navy\"], alpha=[0.8, 0.3], line_width=4)\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 简单数学模型折线图示例代码\n",
    "\n",
    "* 参数说明:\n",
    "> 1. legend: 图元的图例\n",
    "> 2. x_axis_label:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "BokehDeprecationWarning: 'legend' keyword is deprecated, use explicit 'legend_label', 'legend_field', or 'legend_group' keywords instead\n",
      "BokehDeprecationWarning: 'legend' keyword is deprecated, use explicit 'legend_label', 'legend_field', or 'legend_group' keywords instead\n",
      "BokehDeprecationWarning: 'legend' keyword is deprecated, use explicit 'legend_label', 'legend_field', or 'legend_group' keywords instead\n",
      "BokehDeprecationWarning: 'legend' keyword is deprecated, use explicit 'legend_label', 'legend_field', or 'legend_group' keywords instead\n",
      "BokehDeprecationWarning: 'legend' keyword is deprecated, use explicit 'legend_label', 'legend_field', or 'legend_group' keywords instead\n",
      "BokehDeprecationWarning: 'legend' keyword is deprecated, use explicit 'legend_label', 'legend_field', or 'legend_group' keywords instead\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"0539c1a3-e596-431a-8029-e1240593ffd8\" data-root-id=\"2491\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  var docs_json = {\"7061f5f9-4380-4f45-ba40-b9f06046a070\":{\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"2502\"}],\"center\":[{\"id\":\"2505\"},{\"id\":\"2509\"},{\"id\":\"2533\"}],\"left\":[{\"id\":\"2506\"}],\"plot_height\":350,\"plot_width\":700,\"renderers\":[{\"id\":\"2523\"},{\"id\":\"2538\"},{\"id\":\"2553\"},{\"id\":\"2571\"},{\"id\":\"2591\"},{\"id\":\"2612\"}],\"title\":{\"id\":\"2492\"},\"toolbar\":{\"id\":\"2515\"},\"x_range\":{\"id\":\"2494\"},\"x_scale\":{\"id\":\"2498\"},\"y_range\":{\"id\":\"2496\"},\"y_scale\":{\"id\":\"2500\"}},\"id\":\"2491\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"source\":{\"id\":\"2520\"}},\"id\":\"2524\",\"type\":\"CDSView\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"#1f77b4\",\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2522\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2513\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"2547\",\"type\":\"Selection\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[1.2589254117941673,3.1622776601683795,10.0,31.622776601683793,100.0,316.22776601683796,1000.0]},\"selected\":{\"id\":\"2606\"},\"selection_policy\":{\"id\":\"2607\"}},\"id\":\"2588\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"2526\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"2607\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0]},\"selected\":{\"id\":\"2547\"},\"selection_policy\":{\"id\":\"2548\"}},\"id\":\"2535\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"2530\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"2564\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"2494\",\"type\":\"DataRange1d\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"white\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":8},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2537\",\"type\":\"Circle\"},{\"attributes\":{},\"id\":\"2503\",\"type\":\"BasicTicker\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[0.010000000000000002,0.25,1.0,2.25,4.0,6.25,9.0]},\"selected\":{\"id\":\"2564\"},\"selection_policy\":{\"id\":\"2565\"}},\"id\":\"2550\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[1.023292992280754,1.7782794100389228,10.0,177.82794100389228,10000.0,1778279.410038923,1000000000.0]},\"selected\":{\"id\":\"2629\"},\"selection_policy\":{\"id\":\"2630\"}},\"id\":\"2609\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"axis_label\":\"particles\",\"formatter\":{\"id\":\"2528\"},\"ticker\":{\"id\":\"2507\"}},\"id\":\"2506\",\"type\":\"LogAxis\"},{\"attributes\":{\"source\":{\"id\":\"2535\"}},\"id\":\"2539\",\"type\":\"CDSView\"},{\"attributes\":{\"label\":{\"value\":\"y=x\"},\"renderers\":[{\"id\":\"2523\"},{\"id\":\"2538\"}]},\"id\":\"2534\",\"type\":\"LegendItem\"},{\"attributes\":{},\"id\":\"2565\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"axis_label\":\"sections\",\"formatter\":{\"id\":\"2526\"},\"ticker\":{\"id\":\"2503\"}},\"id\":\"2502\",\"type\":\"LinearAxis\"},{\"attributes\":{\"data_source\":{\"id\":\"2588\"},\"glyph\":{\"id\":\"2589\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2590\"},\"selection_glyph\":null,\"view\":{\"id\":\"2592\"}},\"id\":\"2591\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"data_source\":{\"id\":\"2550\"},\"glyph\":{\"id\":\"2551\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2552\"},\"selection_glyph\":null,\"view\":{\"id\":\"2554\"}},\"id\":\"2553\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"2629\",\"type\":\"Selection\"},{\"attributes\":{\"num_minor_ticks\":10},\"id\":\"2507\",\"type\":\"LogTicker\"},{\"attributes\":{},\"id\":\"2500\",\"type\":\"LogScale\"},{\"attributes\":{\"ticker\":null},\"id\":\"2528\",\"type\":\"LogTickFormatter\"},{\"attributes\":{},\"id\":\"2630\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"overlay\":{\"id\":\"2514\"}},\"id\":\"2511\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"2496\",\"type\":\"DataRange1d\"},{\"attributes\":{\"label\":{\"value\":\"y=10^x^2\"},\"renderers\":[{\"id\":\"2612\"}]},\"id\":\"2632\",\"type\":\"LegendItem\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"red\",\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2570\",\"type\":\"Line\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"orange\",\"line_dash\":[4,4],\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2611\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2512\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"2548\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"label\":{\"value\":\"y=10^x\"},\"renderers\":[{\"id\":\"2571\"},{\"id\":\"2591\"}]},\"id\":\"2587\",\"type\":\"LegendItem\"},{\"attributes\":{},\"id\":\"2498\",\"type\":\"LinearScale\"},{\"attributes\":{\"fill_color\":{\"value\":\"white\"},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":8},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2536\",\"type\":\"Circle\"},{\"attributes\":{\"text\":\"log axis example\"},\"id\":\"2492\",\"type\":\"Title\"},{\"attributes\":{\"label\":{\"value\":\"y=x^2\"},\"renderers\":[{\"id\":\"2553\"}]},\"id\":\"2567\",\"type\":\"LegendItem\"},{\"attributes\":{},\"id\":\"2585\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"data_source\":{\"id\":\"2520\"},\"glyph\":{\"id\":\"2521\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2522\"},\"selection_glyph\":null,\"view\":{\"id\":\"2524\"}},\"id\":\"2523\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"axis\":{\"id\":\"2502\"},\"ticker\":null},\"id\":\"2505\",\"type\":\"Grid\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"#1f77b4\",\"line_width\":3,\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2552\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2510\",\"type\":\"PanTool\"},{\"attributes\":{\"source\":{\"id\":\"2550\"}},\"id\":\"2554\",\"type\":\"CDSView\"},{\"attributes\":{\"line_color\":\"red\",\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2569\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2606\",\"type\":\"Selection\"},{\"attributes\":{\"fill_color\":{\"value\":\"red\"},\"line_color\":{\"value\":\"red\"},\"size\":{\"units\":\"screen\",\"value\":6},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2589\",\"type\":\"Circle\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[1.2589254117941673,3.1622776601683795,10.0,31.622776601683793,100.0,316.22776601683796,1000.0]},\"selected\":{\"id\":\"2584\"},\"selection_policy\":{\"id\":\"2585\"}},\"id\":\"2568\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"axis\":{\"id\":\"2506\"},\"dimension\":1,\"ticker\":null},\"id\":\"2509\",\"type\":\"Grid\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"2510\"},{\"id\":\"2511\"},{\"id\":\"2512\"},{\"id\":\"2513\"}]},\"id\":\"2515\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"2584\",\"type\":\"Selection\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0]},\"selected\":{\"id\":\"2530\"},\"selection_policy\":{\"id\":\"2531\"}},\"id\":\"2520\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"2514\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"data_source\":{\"id\":\"2568\"},\"glyph\":{\"id\":\"2569\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2570\"},\"selection_glyph\":null,\"view\":{\"id\":\"2572\"}},\"id\":\"2571\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"source\":{\"id\":\"2568\"}},\"id\":\"2572\",\"type\":\"CDSView\"},{\"attributes\":{\"data_source\":{\"id\":\"2609\"},\"glyph\":{\"id\":\"2610\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2611\"},\"selection_glyph\":null,\"view\":{\"id\":\"2613\"}},\"id\":\"2612\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"line_color\":\"orange\",\"line_dash\":[4,4],\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2610\",\"type\":\"Line\"},{\"attributes\":{\"data_source\":{\"id\":\"2535\"},\"glyph\":{\"id\":\"2536\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2537\"},\"selection_glyph\":null,\"view\":{\"id\":\"2539\"}},\"id\":\"2538\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"items\":[{\"id\":\"2534\"},{\"id\":\"2567\"},{\"id\":\"2587\"},{\"id\":\"2632\"}]},\"id\":\"2533\",\"type\":\"Legend\"},{\"attributes\":{\"line_color\":\"#1f77b4\",\"line_width\":3,\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2551\",\"type\":\"Line\"},{\"attributes\":{\"line_color\":\"#1f77b4\",\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2521\",\"type\":\"Line\"},{\"attributes\":{\"source\":{\"id\":\"2588\"}},\"id\":\"2592\",\"type\":\"CDSView\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"red\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"red\"},\"size\":{\"units\":\"screen\",\"value\":6},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2590\",\"type\":\"Circle\"},{\"attributes\":{\"source\":{\"id\":\"2609\"}},\"id\":\"2613\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"2531\",\"type\":\"UnionRenderers\"}],\"root_ids\":[\"2491\"]},\"title\":\"Bokeh Application\",\"version\":\"2.1.1\"}};\n",
       "  var render_items = [{\"docid\":\"7061f5f9-4380-4f45-ba40-b9f06046a070\",\"root_ids\":[\"2491\"],\"roots\":{\"2491\":\"0539c1a3-e596-431a-8029-e1240593ffd8\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "2491"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "# 数据\n",
    "x = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]\n",
    "y0 = [i**2 for i in x]\n",
    "y1 = [10**i for i in x]\n",
    "y2 = [10**(i**2) for i in x]\n",
    "# 创建画布\n",
    "p = figure(\n",
    "    tools=\"pan,box_zoom,reset,save\",\n",
    "    y_axis_type=\"log\", title=\"log axis example\",\n",
    "    x_axis_label='sections', y_axis_label='particles',\n",
    "    width=700, height=350)  # y轴类型：log指数或linear线性\n",
    "# 增加图层，绘图\n",
    "p.line(x, x, legend=\"y=x\")\n",
    "p.circle(x, x, legend=\"y=x\", fill_color=\"white\", size=8)\n",
    "p.line(x, y0, legend=\"y=x^2\", line_width=3)\n",
    "p.line(x, y1, legend=\"y=10^x\", line_color=\"red\")\n",
    "p.circle(x, y1, legend=\"y=10^x\", fill_color=\"red\", line_color=\"red\", size=6)\n",
    "p.line(x, y2, legend=\"y=10^x^2\", line_color=\"orange\", line_dash=\"4 4\")\n",
    "# 显示\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 设置图例位置\n",
    "p.legend.location = \"top_left\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 点击图例处，可隐藏某折线\n",
    "p.legend.click_policy = \"hide\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"b92f6f0b-de02-4f93-934b-15a26a71e298\" data-root-id=\"2491\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  var docs_json = {\"47644d6c-e322-473c-9c6d-749fb8d75de3\":{\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"2502\"}],\"center\":[{\"id\":\"2505\"},{\"id\":\"2509\"},{\"id\":\"2533\"}],\"left\":[{\"id\":\"2506\"}],\"plot_height\":350,\"plot_width\":700,\"renderers\":[{\"id\":\"2523\"},{\"id\":\"2538\"},{\"id\":\"2553\"},{\"id\":\"2571\"},{\"id\":\"2591\"},{\"id\":\"2612\"}],\"title\":{\"id\":\"2492\"},\"toolbar\":{\"id\":\"2515\"},\"x_range\":{\"id\":\"2494\"},\"x_scale\":{\"id\":\"2498\"},\"y_range\":{\"id\":\"2496\"},\"y_scale\":{\"id\":\"2500\"}},\"id\":\"2491\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"source\":{\"id\":\"2520\"}},\"id\":\"2524\",\"type\":\"CDSView\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"#1f77b4\",\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2522\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2513\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"2547\",\"type\":\"Selection\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[1.2589254117941673,3.1622776601683795,10.0,31.622776601683793,100.0,316.22776601683796,1000.0]},\"selected\":{\"id\":\"2606\"},\"selection_policy\":{\"id\":\"2607\"}},\"id\":\"2588\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"2526\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"2607\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0]},\"selected\":{\"id\":\"2547\"},\"selection_policy\":{\"id\":\"2548\"}},\"id\":\"2535\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"2530\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"2564\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"2494\",\"type\":\"DataRange1d\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"white\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":8},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2537\",\"type\":\"Circle\"},{\"attributes\":{},\"id\":\"2503\",\"type\":\"BasicTicker\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[0.010000000000000002,0.25,1.0,2.25,4.0,6.25,9.0]},\"selected\":{\"id\":\"2564\"},\"selection_policy\":{\"id\":\"2565\"}},\"id\":\"2550\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[1.023292992280754,1.7782794100389228,10.0,177.82794100389228,10000.0,1778279.410038923,1000000000.0]},\"selected\":{\"id\":\"2629\"},\"selection_policy\":{\"id\":\"2630\"}},\"id\":\"2609\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"axis_label\":\"particles\",\"formatter\":{\"id\":\"2528\"},\"ticker\":{\"id\":\"2507\"}},\"id\":\"2506\",\"type\":\"LogAxis\"},{\"attributes\":{\"source\":{\"id\":\"2535\"}},\"id\":\"2539\",\"type\":\"CDSView\"},{\"attributes\":{\"label\":{\"value\":\"y=x\"},\"renderers\":[{\"id\":\"2523\"},{\"id\":\"2538\"}]},\"id\":\"2534\",\"type\":\"LegendItem\"},{\"attributes\":{},\"id\":\"2565\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"axis_label\":\"sections\",\"formatter\":{\"id\":\"2526\"},\"ticker\":{\"id\":\"2503\"}},\"id\":\"2502\",\"type\":\"LinearAxis\"},{\"attributes\":{\"data_source\":{\"id\":\"2588\"},\"glyph\":{\"id\":\"2589\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2590\"},\"selection_glyph\":null,\"view\":{\"id\":\"2592\"}},\"id\":\"2591\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"data_source\":{\"id\":\"2550\"},\"glyph\":{\"id\":\"2551\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2552\"},\"selection_glyph\":null,\"view\":{\"id\":\"2554\"}},\"id\":\"2553\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"2629\",\"type\":\"Selection\"},{\"attributes\":{\"num_minor_ticks\":10},\"id\":\"2507\",\"type\":\"LogTicker\"},{\"attributes\":{},\"id\":\"2500\",\"type\":\"LogScale\"},{\"attributes\":{\"ticker\":null},\"id\":\"2528\",\"type\":\"LogTickFormatter\"},{\"attributes\":{},\"id\":\"2630\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"overlay\":{\"id\":\"2514\"}},\"id\":\"2511\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"2496\",\"type\":\"DataRange1d\"},{\"attributes\":{\"label\":{\"value\":\"y=10^x^2\"},\"renderers\":[{\"id\":\"2612\"}]},\"id\":\"2632\",\"type\":\"LegendItem\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"red\",\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2570\",\"type\":\"Line\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"orange\",\"line_dash\":[4,4],\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2611\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2512\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"2548\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"label\":{\"value\":\"y=10^x\"},\"renderers\":[{\"id\":\"2571\"},{\"id\":\"2591\"}]},\"id\":\"2587\",\"type\":\"LegendItem\"},{\"attributes\":{},\"id\":\"2498\",\"type\":\"LinearScale\"},{\"attributes\":{\"fill_color\":{\"value\":\"white\"},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":8},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2536\",\"type\":\"Circle\"},{\"attributes\":{\"text\":\"log axis example\"},\"id\":\"2492\",\"type\":\"Title\"},{\"attributes\":{\"label\":{\"value\":\"y=x^2\"},\"renderers\":[{\"id\":\"2553\"}]},\"id\":\"2567\",\"type\":\"LegendItem\"},{\"attributes\":{},\"id\":\"2585\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"data_source\":{\"id\":\"2520\"},\"glyph\":{\"id\":\"2521\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2522\"},\"selection_glyph\":null,\"view\":{\"id\":\"2524\"}},\"id\":\"2523\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"axis\":{\"id\":\"2502\"},\"ticker\":null},\"id\":\"2505\",\"type\":\"Grid\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"#1f77b4\",\"line_width\":3,\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2552\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2510\",\"type\":\"PanTool\"},{\"attributes\":{\"source\":{\"id\":\"2550\"}},\"id\":\"2554\",\"type\":\"CDSView\"},{\"attributes\":{\"line_color\":\"red\",\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2569\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"2606\",\"type\":\"Selection\"},{\"attributes\":{\"fill_color\":{\"value\":\"red\"},\"line_color\":{\"value\":\"red\"},\"size\":{\"units\":\"screen\",\"value\":6},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2589\",\"type\":\"Circle\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[1.2589254117941673,3.1622776601683795,10.0,31.622776601683793,100.0,316.22776601683796,1000.0]},\"selected\":{\"id\":\"2584\"},\"selection_policy\":{\"id\":\"2585\"}},\"id\":\"2568\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"axis\":{\"id\":\"2506\"},\"dimension\":1,\"ticker\":null},\"id\":\"2509\",\"type\":\"Grid\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"2510\"},{\"id\":\"2511\"},{\"id\":\"2512\"},{\"id\":\"2513\"}]},\"id\":\"2515\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"2584\",\"type\":\"Selection\"},{\"attributes\":{\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0]},\"selected\":{\"id\":\"2530\"},\"selection_policy\":{\"id\":\"2531\"}},\"id\":\"2520\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"2514\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"data_source\":{\"id\":\"2568\"},\"glyph\":{\"id\":\"2569\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2570\"},\"selection_glyph\":null,\"view\":{\"id\":\"2572\"}},\"id\":\"2571\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"source\":{\"id\":\"2568\"}},\"id\":\"2572\",\"type\":\"CDSView\"},{\"attributes\":{\"data_source\":{\"id\":\"2609\"},\"glyph\":{\"id\":\"2610\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2611\"},\"selection_glyph\":null,\"view\":{\"id\":\"2613\"}},\"id\":\"2612\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"line_color\":\"orange\",\"line_dash\":[4,4],\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2610\",\"type\":\"Line\"},{\"attributes\":{\"data_source\":{\"id\":\"2535\"},\"glyph\":{\"id\":\"2536\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"2537\"},\"selection_glyph\":null,\"view\":{\"id\":\"2539\"}},\"id\":\"2538\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"click_policy\":\"hide\",\"items\":[{\"id\":\"2534\"},{\"id\":\"2567\"},{\"id\":\"2587\"},{\"id\":\"2632\"}],\"location\":\"top_left\"},\"id\":\"2533\",\"type\":\"Legend\"},{\"attributes\":{\"line_color\":\"#1f77b4\",\"line_width\":3,\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2551\",\"type\":\"Line\"},{\"attributes\":{\"line_color\":\"#1f77b4\",\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2521\",\"type\":\"Line\"},{\"attributes\":{\"source\":{\"id\":\"2588\"}},\"id\":\"2592\",\"type\":\"CDSView\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"red\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"red\"},\"size\":{\"units\":\"screen\",\"value\":6},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"2590\",\"type\":\"Circle\"},{\"attributes\":{\"source\":{\"id\":\"2609\"}},\"id\":\"2613\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"2531\",\"type\":\"UnionRenderers\"}],\"root_ids\":[\"2491\"]},\"title\":\"Bokeh Application\",\"version\":\"2.1.1\"}};\n",
       "  var render_items = [{\"docid\":\"47644d6c-e322-473c-9c6d-749fb8d75de3\",\"root_ids\":[\"2491\"],\"roots\":{\"2491\":\"b92f6f0b-de02-4f93-934b-15a26a71e298\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "2491"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "# 展示折线图\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.3"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
